<template>
  <div class="c" style="height: 100%; display: flex; flex-direction: column">
    <navconH5
      style="background-color: #fff"
      texts="设备状态"
      :leftShow="true"
    />

    <!-- 数据重新输入开始 -->
    <div>
      <t-message
        v-if="shoolObj.is_wifistatus == 1 || shoolObj.is_camerastatus == 1"
        theme="success"
        class="shoolmessage infos"
        v-model="visible"
        content="正在使用中"
      />
      <t-message
        v-else
        theme="error"
        class="shoolmessage errors"
        v-model="visible"
        content="未使用"
      />
    </div>
    <div style="height: 100%; overflow-y: scroll">
      <div class="tb_lgj_boxs">
        <div class="titles">基础信息</div>
        <t-form
          ref="rulesForm"
          label-position="lefrt"
          style="font-size: 14px"
          label-align="left"
          :data="formData"
        >
          <t-form-item label="学校名称" prop="school_name" name="school_name">
            {{ shoolObj.school_name }}
          </t-form-item>
          <t-form-item label="所在省" prop="province" name="province">
            {{ shoolObj.province }}
          </t-form-item>
          <t-form-item label="所在区县" prop="county" name="county">
            {{ shoolObj.county }}
          </t-form-item>
          <t-form-item label="所在城市" prop="city" name="city">
            {{ shoolObj.city }}
          </t-form-item>
          <t-form-item label="学校类别" prop="school_type" name="school_type">
            {{ shoolObj.school_type }}
          </t-form-item>
          <t-form-item label="年级">
            {{ shoolObj.grade }}
          </t-form-item>
          <t-form-item label="班级">
            {{ shoolObj.class_name }}
          </t-form-item>
          <t-form-item label="在地工作人员" labelWidth="130px">
            {{ shoolObj.user_name }}
          </t-form-item>
          <t-form-item label="是否提供摄像头" labelWidth="130px">
            <t-input
              v-model.trim="finalData.is_camera"
              maxlength="60"
              clearable
              borderless
              align="right"
              placeholder="是否提供摄像头"
              style="width: 200px"
            ></t-input>
          </t-form-item>
          <t-form-item label-width="170">
            <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
            <div style="width: 100%">
              <t-cell-group>
                <t-cell
                  title="摄像头设备状态"
                  :note="finalData.is_camerastatus || '摄像头设备状态'"
                  arrow
                  @click="popupShow('is_camerastatus')"
                >
                  <template #note>
                    <span :class="finalData.is_camerastatus ? 't_cell' : ''">{{
                      showtitles(options, finalData.is_camerastatus) ||
                      "摄像头设备状态"
                    }}</span>
                  </template>
                </t-cell>
              </t-cell-group>
            </div>

            <t-action-sheet
              v-model="visiblees.is_camerastatus"
              :items="options"
              @cancel="visiblehide"
              :close-on-overlay-click="false"
              :show-overlay="true"
              readonly
              @selected="receptionData('is_camerastatus', $event)"
            />
          </t-form-item>
          <t-form-item label="是否提供随身WIFI" labelWidth="130px">
            <t-input
              v-model.trim="finalData.is_wifi"
              maxlength="60"
              clearable
              borderless
              align="right"
              placeholder="是否提供随身WIFI"
              style="width: 200px"
            ></t-input>
          </t-form-item>
          <t-form-item label-width="170">
            <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
            <div style="width: 100%">
              <t-cell-group>
                <t-cell
                  title="WIFI设备状态"
                  :note="finalData.is_wifistatus || 'WIFI设备状态'"
                  arrow
                  @click="popupShow('is_wifistatus')"
                >
                  <template #note>
                    <span :class="finalData.is_wifistatus ? 't_cell' : ''">{{
                      showtitles(options, finalData.is_wifistatus) ||
                      "WIFI设备状态"
                    }}</span>
                  </template>
                </t-cell>
              </t-cell-group>
            </div>

            <t-action-sheet
              v-model="visiblees.is_wifistatus"
              :items="options"
              @cancel="visiblehide"
              :close-on-overlay-click="false"
              :show-overlay="true"
              readonly
              @selected="receptionData('is_wifistatus', $event)"
            />
          </t-form-item>
        </t-form>
      </div>
      <!-- <div style="height: 10vh"></div> -->
      <!-- <div style="height: 10vh" v-if="authority([2, 3, 4])"></div> -->
    </div>

    <BottomAdd>
      <!-- 在地底部 -->
      <div class="boxs_bov_buttons">
        <el-button
          type="success"
          style="width: 100%; height: 40px"
          :disabled="tybh"
          @click="endForm(finalData)"
          >保存修改</el-button
        >
      </div>
    </BottomAdd>
  </div>
</template>
      
<script>
import {
  schoolEdit,
  schoolDel,
  statuss,
  scheduling,
  schoolUpdate,
} from "@/api/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { Message } from "tdesign-mobile-vue";

import navconH5 from "@/components/navconH5.vue";

import { setStorage, getStorage } from "@/utils/util";
import BottomAdd from "@/components/bottom_add.vue";
import AddShool from "@/components/h5com/shool/addSchool.vue";

export default {
  components: {
    AddShool,
    navconH5,
    BottomAdd,
  },
  data() {
    return {
      tybh: true, //是否禁用
      visiblees: {},
      visible: true,
      id: this.$route.query.id,
      shoolObj: {},
      isCollapse: false,
      userInfo: "", //用户权限id
      imageUrl: [],
      imagsShow: false,
      finalData: {},
      options: [
        { label: "使用中", value: "1" },
        { label: "停止使用", value: "2" },
        { label: "已丢失", value: "3" },
        { label: "丢失补发", value: "4" },
      ],
    };
  },
  watch: {
    isCollapse(val) {
      this.pausevideo();
    },
    finalData: {
      handler(newVal, oldVal) {
        // 比对 shoolObj 和 finalData
        console.log("finalData", newVal);
        this.tybh = this.isEqual(newVal);
      },
      deep: true, // 深度监听
    },
  },
  mounted(o) {
    // //console.log(o,'----------o')
    this.ShoolDatails();
  },
  created(o) {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
    // this.ShoolDatails();
  },
  methods: {
    isEqual(obj1) {
      let obj2 = this.shoolObj;
      let flag = true; //正常 就是一致
      for (const key in obj1) {
        if (obj1[key] != obj2[key]) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    visiblehide(value) {
      console.log("执行", value);
      // 遮罩层关闭
      this.visiblees = {};
    },
    receptionData(key, value) {
      // 接受弹出层的数据给 formInline 只接受但数据
      if (typeof value === "object" && value.value) {
        this.finalData[key] = value.value;
      }

      if (typeof value == "string") this.finalData[key] = value;

      this.visiblehide();
    },
    // showtitles 显示标题
    showtitles(arr, id) {
      let titles = "";
      if (!id) return;
      let arres = arr.filter((item) => item.value == id);

      if (arres.length) titles = arres[0].label;
      return titles;
    },
    popupShow(value) {
      this.visiblees = {};
      console.log(value, "---------value");
      this.visiblees[value] = true;
    },
    videoBiu() {
      this.$refs.propVideos.visible = true;
    },
    imageShows(row) {
      this.imagsShow = true;
      this.imageUrl = row.images;
    },
    endForm(obj) {
      let vm = this;
      schoolUpdate(obj).then((res) => {
        if (res.code == 1) {
          vm.$message.success(res.msg);
          vm.ShoolDatails();
        } else {
          Message.error(res.msg || "失败");
        }
      });
    },

    openOkAllons(e) {
      let vm = this;
      vm.$confirm("是否确认选中的数据进行重新核校?", "重新核校", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return statuss({ ids: e, status: 1 }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.ShoolDatails();
            // vm.getData();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    Problem(row) {
      // 问题校
      let vm = this;
      ElMessageBox.prompt("请输入问题校原因", "问题校", {
        modalClass: "tanchuangshim",
        cancelButtonClass: "el-button el-button--success is-plain", //取消
        confirmButtonClass: "el-button--success", //确定
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /.+/,
        inputErrorMessage: "请输入问题校原因",
      }).then(({ value }) => {
        return schoolUpdate({
          wenti_remark: value,
          id: vm.shoolObj.id,
          status: 5,
        }).then((res) => {
          vm.$message.success(res.msg);
          vm.ShoolDatails();
        });
      });
    },
    // 排课确认
    paikeok() {
      let vm = this;
      // 确认排课
      this.$confirm("确定进行排课确认吗？", "排课确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let objs = {
          id: vm.shoolObj.id,
        };
        scheduling(objs).then((res) => {
          vm.ShoolDatails();
        });
      });
    },
    openOkAllcx() {
      // 重新核校
      let vm = this;
      this.$dialog.confirm({
        title: "重新核校确认",
        content: `是否确认对该校进行重新核校`,
        confirmBtn: "确认",
        cancelBtn: "取消",
        onConfirm: () => {
          return statuss({
            id: vm.shoolObj.id,
            status: 1,
          }).then((res) => {
            if (res.code == 1) {
              Message.success(res.msg);
              vm.ShoolDatails();
              // vm.getData();
            } else {
              Message.success(res.msg);

              // vm.$message.warning(res.msg);
            }
          });
        },
      });
    },
    // 在地区域核校操作
    openOkAll(e) {
      let vm = this;
      vm.$dialog.confirm({
        title: `${e == 1 ? "通过" : "驳回"}确认`,
        content: `是否确认对该校进行核校${e == 1 ? "通过" : "驳回"}?`,
        confirmBtn: "确认",
        cancelBtn: "取消",
        type: "warning",
        onConfirm: () => {
          return statuss({
            id: vm.shoolObj.id,
            status:
              e == 1
                ? Number(vm.shoolObj.status) + 2
                : Number(vm.shoolObj.status) + 1,
          }).then((res) => {
            if (res.code == 1) {
              vm.$message.success(res.msg);
              vm.ShoolDatails();
              // vm.getData();
            } else {
              vm.$message.warning(res.msg);
            }
          });
        },
      });
    },
    // 学校弹窗显示
    addModuleLogShool() {
      this.$refs.diaologshool.addPlan(this.shoolObj);
    },
    // 学校删除
    handleDelete() {
      let vm = this;

      vm.$dialog.confirm({
        title: "删除警告",
        content: `是否确认删除当前数据?`,
        confirmBtn: "确认",
        cancelBtn: "取消",
        onConfirm: () => {
          return schoolDel({ id: vm.shoolObj.id }).then((res) => {
            if (res.code == 1) {
              // vm.$message.success(res.msg);
              Message.success(res.msg);

              vm.$router.go(-1);
            } else {
              // vm.$message.warning(res.msg);
              Message.warning(res.msg);
            }
          });
        },
      });
    },
    refreshData(x) {
      this.ShoolDatails();
    },
    // 在校核校确认
    hxok() {
      if (this.authority([4])) {
        this.$refs.addModuleShool.editupdata(this.shoolObj, "核校");
      } else if (this.authority([2])) {
        this.$refs.addModuleShool.editupdata(this.shoolObj, "编辑");
      }
    },
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    pausevideo() {
      // 暂停所有视频
      if (!this.$refs.videoref) return;
      this.$refs.videoref.forEach((video) => {
        if (video) video.pause();
      });
    },
    // 获取基础学校数据
    ShoolDatails() {
      let vm = this;
      schoolEdit({ id: this.id }).then((res) => {
        console.log(res.data, "---获取到的学校数据");
        this.shoolObj = { ...res.data };
        this.finalData = { ...res.data };

        //console.log(res.data.video)

        // isCollapse
        if (res.data.images) {
          return (vm.isCollapse = false);
        }
        if (res.data.video) {
          return (vm.isCollapse = true);
        }
      });
    },
  },
};
</script>
      
      <style>
.c {
  background: rgb(241, 241, 241) !important;
}
.el-form-itemse {
  min-width: 40%;
}
.h5_school_details {
  padding: 15px;
  box-sizing: border-box;
  /* background: #fff; */
}

.shoolmessage {
  position: inherit !important;
  box-sizing: border-box;
  border: none;
}
.infos {
}
</style>
    <style lang="scss"  >
.successs {
  background: #e2fff8 !important;
  color: #49b9ad !important;
  .t-message__text {
    color: #49b9ad !important;
  }
}
.warnings {
  background: #fef1f1 !important;
  color: #f6a055 !important;
  .t-message__text {
    color: #f6a055 !important;
  }
}
.infos {
  background: #f3f1fe !important;
  color: #147df5 !important;
  .t-message__text {
    color: #147df5 !important;
  }
}
.errors {
  background: #fef1f1 !important;
  color: #f65755 !important;
  .t-message__text {
    color: #f65755 !important;
  }
}

.tb_lgj_boxs {
  background: #fff;
  margin-bottom: 10px;
  .titles {
    padding: 15px;
    color: #1c2023;
    font-weight: 600;
  }
}
</style>
     